<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>PC_manage</title>
		<link href="assets/css/bootstrap.css" rel="stylesheet" />
		<link href="assets/css/font-awesome.css" rel="stylesheet" />
		<link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
		<link href="assets/css/custom-styles.css" rel="stylesheet" />
		<link href="assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
		<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
		<style>
			body {
				font-family: "微软雅黑";
				padding: 0px;
				margin: 0px;
			}
			
			a {
				text-decoration: none;
				color: #333;
			}
			
			.trigger {
				display: inline-block;
				margin: 100px 400px;
			}
			
			.modalBox {
				display: none;
			}
			
			.overLay {
				position: fixed;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				opacity: 0.5;
				background-color: #000000;
			}
			
			.alertContent {
				width: 300px;
				height: 600px;
				background: #ffffff;
				border: 1px solid #333333;
				position: absolute;
				top: 200px;
				left: 500px;
			}
			
			.alertContent p {
				border-bottom: 1px dashed #333333;
			}
		</style>
	</head>
	<!--下面继承，使用4个超链接，ajax局部刷新-->

	<body>
		<div id="wrapper">
			<nav class="navbar-default navbar-side" role="navigation">
				<div class="sidebar-collapse">
					<ul class="nav" id="main-menu">

						<li>
							<a href="Lib_libmanage.html"><i class="fa fa-book"></i> LibManage</a>
						</li>
						<li>
							<a class="active-menu" href="Lib_pcmanage.html"><i class="fa fa-desktop"></i>ComputetManage</a>
						</li>
						<li>
							<a href="Lib_stumanage.html"><i class="fa fa-users"></i> MemberManage</a>
						</li>
					</ul>
				</div>
				<!--
                  	作者：annz
                  	时间：2018-06-13
                  	描述：对应的4个实验室要管理的部分
                  -->
			</nav>
			<div id="page-wrapper">

				<div class="panel panel-default">
					<div class="panel-heading">
						<h2>Computer message and manage</h2><br>
					</div>
					<div class="panel-body">
						<div class="table-responsive">
							<table class="table table-striped table-bordered table-hover" id="dataTables-pc">
								<thead>
									<tr valueid="a0420" class="models">
										<th>PCid</th>
										<th>PCos</th>
										<th>PCip</th>
										<th>PClocation</th>
										<th>PClib</th>
										<th>Contral</th>
										<th>View</th>
									</tr>
								</thead>
								<tbody id="allPC">

								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="panel-body">
					<ul class="nav nav-pills">
						<li class="">
							<a href="#add-pills" data-toggle="tab">Add_Pc</a>
						</li>
						<li class="">
							<a href="#echart-pills" data-toggle="tab" onclick="chart()">charts</a>
						</li>
					</ul>

					<div class=" tab-content">
						<div class="tab-pane fade" id="add-pills">
							<div class="form-group" style="width:15%">
								<label>chooseLib</label>
								<div class="form-group" style="width:10%">
									<label>Inputid</label>
									<input id="idinput">
								</div>
								<select id="libchoose" class="form-control">
									<option>Lib-001</option>
									<option>Lib-002</option>
									<option>Lib-003</option>
									<option>Lib-004</option>
								</select>
							</div>
							<div class="form-group" style="width:10%">
								<label>InputOS</label>
								<input id="osinput">
							</div>
							<div class="form-group" style="width:10%">
								<label>InputIP</label>
								<input id="ipinput" onKeyUp="value=value.replace(/[^0-9.]/g,'')">
							</div>
							<div class="form-group" style="width:10%">
								<label>InoutLocation</label>
								<input id="locationinput" onKeyUp="value=value.replace(/[^\d]/g,'')">
							</div>
							<div class="form-group" style="width:15%">
								<a onclick="add_pc()">Addpc</a>
							</div>
						</div>
						<script src="assets/js/echarts.min.js"></script>
						<div class="tab-pane fade" id="echart-pills">
							<div id="oschaet" style="width: 600px;height:400px;"></div>
							<div id="Libchaet" style="width: 600px;height:400px;"></div>
						</div>

					</div>

				</div>
			</div>

			<div class="modalBox">
				<div class="overLay"></div>
				<div class="alertContent">
					<h4>Input what you want to modify </h4> PcID->
					<p id="title_modal"></p>
					<form method="post" action="libmanage/Modify_pcmanage">
						<input name="ID" id="ids" type="hidden"><br> Change_Os :<input name="OS" id="os"> Change_Ip :<input name="IP" id="ip"> Change_location :<input name="LOCATION" id="location"> Change_Lib :<input name="LIB" id="Lib"><br>
						<input value="Ok" style="width:80%;" type="submit"><br>
					</form>
					<button onclick="modalsub2()">Quit</button>
				</div>
			</div>
		</div>
		<script src="assets/js/jquery-1.10.2.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/jquery.metisMenu.js"></script>
		<script src="assets/js/morris/raphael-2.1.0.min.js"></script>
		<script src="assets/js/morris/morris.js"></script>
		<script src="assets/js/custom-scripts.js"></script>
		<script src="assets/js/actions/addtext.js"></script>
		<script src="assets/js/dataTables/jquery.dataTables.js"></script>
		<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
		<script>
			window.onload = function fresh() {
				var AllPC_table = document.getElementById("allPC");
				var strs = 1;
				$.ajax({
					url: 'libmanage/Fresh_pcmanage',
					data: {
						"strs": strs,
					},
					dataType: 'json',
					type: 'POST',
					success: function(jsondata) {
						console.log(jsondata)
						AllPC_table.innerHTML = "";
						creatpcmanagetable(jsondata.jsondata, AllPC_table);
						datainit();
					}
				})
			}

			function datainit() {
				$('#dataTables-pc').dataTable();
			};

			function chart() {
				getlibchart();
				getoschart();
			}

			function getoschart() {
				$.ajax({
					url: 'chart/pc_os',
					data: {
						"strs": 1,
					},
					dataType: 'json',
					type: 'POST',
					success: function(jsondata) {
						rs = jsondata.jsondata;
						arr = [];
						for(var i = 0; i < rs.length; i++)
						{
							var obj = {
								value:rs[i].c,
								name:rs[i].pc_os,
							}
							arr[i]=obj
						  }
						console.log(arr);
						ocharts(arr);

					}
				})
			}

			function getlibchart() {
				$.ajax({
					url: 'chart/pc_count',
					data: {
						"strs": 1,
					},
					dataType: 'json',
					type: 'POST',
					success: function(jsondata) {
						rs = jsondata.jsondata;
						arr = [];
						for(var i = 0; i < rs.length; i++)
							arr[i] = (rs[i].c)
						console.log(arr);
						charts(arr);

					}
				})
			}

			function ocharts(dataarray) {
				var myChart = echarts.init(document.getElementById('oschaet'));

				var option = {
					series: [{
						name: 'pc_os_view',
						type: 'pie',
						radius: '55%',
						data: dataarray,
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}

			function charts(dataarray) {
				var myChart = echarts.init(document.getElementById('Libchaet'));

				var option = {
					title: {
						text: 'Count PC of lib'
					},
					tooltip: {},
					legend: {
						data: ['count']
					},
					xAxis: {
						data: ["Lib-001", "Lib-002", "Lib-003", "Lib-004"]
					},
					yAxis: {},
					series: [{
						name: 'count',
						type: 'bar',
						data: dataarray
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}

			function deletel(a) {
				if(window.confirm('You Sure to delete？')) {
					$.ajax({
						url: 'libmanage/Delete_pcmanage',
						data: {
							"id": a,
						},
						dataType: 'text',
						type: 'POST',
						success: function(deleteid) {
							if(deleteid !== "error") {
								alert(deleteid + "is deleted");
								var tr = document.getElementById(deleteid);
								tr.parentNode.removeChild(tr);
								$('#dataTables-pc').dataTable();
							} else {
								alert("error");
							}
							//先删,增，再改，最后实时。 同理学生管理。
						}
					})

				} else {

				}
			}

			function add_pc() {
				var id = document.getElementById("idinput").value;
				var os = document.getElementById("osinput").value;
				var ip = document.getElementById("ipinput").value;
				var location = document.getElementById("locationinput").value;
				var lib = document.getElementById("libchoose").value;
				$.ajax({
					url: 'libmanage/Add_pcmanage',
					data: {
						"id": id,
						"os": os,
						"ip": ip,
						"location": location,
						"lib": lib,
					},
					dataType: 'json',
					type: 'POST',
					success: function(pclist) {
						var tr = document.createElement("tr");
						tr.setAttribute("id", pclist.id);
						var idtd = document.createElement("td");
						var ostd = document.createElement("td");
						var Iptd = document.createElement("td");
						var locationtd = document.createElement("td");
						var libtd = document.createElement("td");
						var ctrtd = document.createElement("td");
						var usingtd = document.createElement("td");
						idtd.innerHTML = pclist.id;
						ostd.innerHTML = pclist.os;
						Iptd.innerHTML = pclist.ip;
						locationtd.innerHTML = pclist.location;
						libtd.innerHTML = pclist.lib;
						var bt1 = document.createElement("a");
						var bt2 = document.createElement("a");
						bt1.innerHTML = "->delete";
						bt2.innerHTML = "->modify";
						bt1.setAttribute("onclick", "deletel('" + pclist.id + "')");
						bt2.setAttribute("onclick", "modify('" + pclist.id + "')");
						ctrtd.appendChild(bt1);
						ctrtd.appendChild(bt2);
						usingtd.innerHTML = "---";
						tr.appendChild(idtd)
						tr.appendChild(ostd)
						tr.appendChild(Iptd)
						tr.appendChild(locationtd)
						tr.appendChild(libtd)
						tr.appendChild(ctrtd)
						tr.appendChild(usingtd)
						document.getElementById("allPC").appendChild(tr)

						$('#dataTables-pc').dataTable();
						//先删,增，再改，最后实时。 
					}
				})

			}

			function modify(a) {
				document.getElementById("title_modal").innerHTML = a;
				var modal = document.getElementsByClassName("modalBox")[0];
				var tr = document.getElementById(a);
				document.getElementById("ids").value = a;
				document.getElementById("os").value = tr.getElementsByTagName("td")[1].innerHTML;
				document.getElementById("ip").value = tr.getElementsByTagName("td")[2].innerHTML;
				document.getElementById("location").value = tr.getElementsByTagName("td")[3].innerHTML;
				document.getElementById("Lib").value = tr.getElementsByTagName("td")[4].innerHTML;
				modal.style.display = 'block';
			}

			function modalsub2() {
				var modal = document.getElementsByClassName("modalBox")[0];
				modal.style.display = 'none';
			}
		</script>

	</body>

</html>